<template>
  <view class="content">
    <view class="header-block">
      <view class="pd-20">
        <u-search :placeholder="searchType == 'department' ? '请输入部门名' : '请输入用户名'" v-model="keyword" @search="search()" @custom="search()"></u-search>
      </view>
    </view>
    <view class="pd-20 mt-100">
      <view v-if="JSON.stringify(showList) != '[]'" class="list-block pd-20">
        <scroll-view :scroll-y="true" style="height: 880rpx;">
          <view v-for="(item, index) in showList" :key="index" @click="changeDepartment(item, index)">
            <view class="item-block pt-20 pb-20">
              <view class="item-title">{{item.name}}</view>
              <image v-if="item.hasChildren" class="arrow-right" src="../static/images/arrow-right.png" @click.stop="chooseDepartment(item, index)"></image>
            </view>
            <view v-if="checkIndex == index && checkState">
              <view v-if="JSON.stringify(userList) != '[]'" class="user-list-block pd-20">
                <view class="user-item-block" v-for="(child, ind) in userList" :key="ind" @click.stop="chooseUser(child)">{{child.nickname}}</view>
              </view>
              <view v-else class="user-empty-block">该部门下暂无人员</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-else class="empty-block">
        <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
      </view>
      <view class="page-block mt-20">
        <!-- <u-button :disabled="!reduceState" class="button" :customStyle="{ width: '300rpx', padding: '0', margin: '0' }" @click="changePage('reduce')">上一页</u-button> -->
        <!-- <u-button :disabled="!addState" class="button" type="primary" :customStyle="{ width: '300rpx', padding: '0', margin: '0' }" @click="changePage('add')">下一页</u-button> -->

        <view v-if="JSON.stringify(headerList) != '[]'" class="header-list">
          <view class="header-item" @click="changeShowList()">
            <view class="mr-10">全部</view>
            <u-icon name="arrow-right" color="#3C9CFF" size="30rpx"></u-icon>
          </view>
          <view class="header-item" v-for="(item, index) in headerList" :key="index" @click="changeShowList(index)">
            <view class="mr-10">{{item.label}}</view>
            <u-icon name="arrow-right" color="#3C9CFF" size="30rpx"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDepartmentListApi, getUserListByDepartmentApi, getDepartmentNewListApi } from '@/apis/work/common.js'
  import { getUserInfo } from '@/utils/auth.js'

  export default {
    data() {
      return {
        paramsKey: '',
        keyword: '',
        searchType: 'department',
        list: [],
        showList: [],
        searchList: [],
        searchState: false,
        page: 1,
        pageSize: 10,
        minNumber: 0,
        maxNumber: 10,
        reduceState: true,
        addState: true,

        checkIndex: -1,
        checkState: false,
        userList: [],
        headerList: [],
        chooseItem: {
          deptId: '',
          deptName: '',
          peoId: '',
          peoName: ''
        },
        departmentState: false
      }
    },
    onLoad(options) {
      if(options.paramsKey) this.paramsKey = options.paramsKey
      if(options.departmentState) this.departmentState = true
      // this.getDepartmentList()
      let userInfo = getUserInfo()
      if(userInfo.company.id) {
        this.getDepartmentNewList({id: userInfo.company.id})
      } else {
        uni.showToast({ title: '当前登录用户没有机构信息', icon: 'none' })
      }
    },
    methods: {
      getDepartmentNewList: function(params) {
        uni.showLoading({title: '数据加载中', mask: true })
        getDepartmentNewListApi(params).then(res => {
          this.list = res
          this.showList = JSON.parse(JSON.stringify(res))
          uni.hideLoading()
          // this.sliceList()
        }).catch(err => console.warn(err))
      },
      // getDepartmentList: function() {
      //   getDepartmentListApi({ parentId: 1002 }).then(res => {
      //     this.list = res
      //     // this.sliceList()
      //   }).catch(err => console.warn(err))
      // },
      // changePage: function(type) {
      //   type == 'add' ? this.page ++ : this.page --
      //   this.maxNumber = this.page * this.pageSize
      //   this.minNumber = this.maxNumber - this.pageSize
      //   this.checkIndex = -1
      //   this.checkState = false
      //   this.sliceList()
      // },
      // sliceList: function() {
      //   let list = this.searchState ? this.searchList : this.list
      //   if(this.maxNumber > list.length) {
      //     this.showList = list.slice(this.minNumber, list.length)
      //   } else {
      //     this.showList = list.slice(this.minNumber, this.maxNumber)
      //   }
      //   this.showList.length < this.pageSize ? this.addState = false : this.addState = true
      //   this.page <= 1 ? this.reduceState = false : this.reduceState = true
      // },
      search: function() {
        if(this.keyword) {
          let list = []
          this.showList.map(item => {
            if(item.name.indexOf(this.keyword) > -1) list.push(item)
          })
          this.showList = list
          this.searchState = true
        } else {
          this.showList = this.headerList.length > 0 ? this.headerList[this.headerList.length - 1].list : this.list
          this.searchState = false
        }
        // this.page = 1
        // this.maxNumber = this.page * this.pageSize
        // this.minNumber = this.maxNumber - this.pageSize
        this.checkIndex = -1
        this.checkState = false
        // this.sliceList()
      },
      chooseDepartment: function(item, index) {
        this.headerList.push({ label: item.name, index, list: item.children })
        this.showList = JSON.parse(JSON.stringify(item.children))
        this.userList = []
        this.checkState = false
      },
      changeDepartment: function(item, index) {
        if(this.departmentState) {
          const wxCurrPage = getCurrentPages()
          const wxPrevPage = wxCurrPage[wxCurrPage.length - 2]
          wxPrevPage.$vm.params[`${this.paramsKey}DeptIdName`] = item.name
          wxPrevPage.$vm.params[`${this.paramsKey}DeptId`] = item.id
          uni.navigateBack()
        } else {
          getUserListByDepartmentApi({ deptId: item.id }).then(res => {
            Object.assign(this.chooseItem, { deptId: item.id, deptName: item.name })
            this.userList = res
            let checkIndex = JSON.parse(JSON.stringify(this.checkIndex))
            if (checkIndex == index) {
              this.checkState = !this.checkState
            } else {
              this.checkState = true
            }
            this.checkIndex = index
          }).catch(err => console.warn(err))
        }
      },
      changeShowList: function(index) {
        if(index != null) {
          this.showList = this.headerList[index].list
          this.headerList.splice(index + 1, this.headerList.length - index)
        } else {
          this.showList = JSON.parse(JSON.stringify(this.list))
          this.headerList = []
        }
        this.checkIndex = -1
        this.checkState = false
      },
      chooseUser: function(item) {
        Object.assign(this.chooseItem, { peoId: item.id, peoName: item.nickname })
        console.log(this.chooseItem)
        const wxCurrPage = getCurrentPages()
        const wxPrevPage = wxCurrPage[wxCurrPage.length - 2]
        wxPrevPage.$vm.params[`${this.paramsKey}DeptIdName`] = this.chooseItem.deptName
        wxPrevPage.$vm.params[`${this.paramsKey}PeoId`] = this.chooseItem.peoId
        wxPrevPage.$vm.params[`${this.paramsKey}PeoIdName`] = this.chooseItem.peoName
        wxPrevPage.$vm.params[`${this.paramsKey}DeptId`] = this.chooseItem.deptId
        wxPrevPage.$vm.params[`${this.paramsKey}applicationUnit`] = this.chooseItem.deptName
        console.log(wxPrevPage.$vm.params)
        uni.navigateBack()
      }
    }
  }
</script>

<style>
  page {
    background-color: #EFEFEF;
  }
</style>

<style lang="scss" scoped>
  .content {
    .header-block {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #FFFFFF;
      z-index: 999;
    }
    .list-block {
      border-radius: 10rpx;
      background-color: #FFFFFF;
      .item-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #EFEFEF;
        .item-title {
          width: 90%;
          font-size: 30rpx;
          line-height: 46rpx;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .arrow-right {
          width: 36rpx;
          height: 36rpx;
        }
      }
      .item-block:last-child {
        border-bottom: none;
      }
      .user-list-block {
        display: flex;
        flex-wrap: wrap;
        background-color: #EFEFEF;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
        .user-item-block {
          padding: 5rpx 20rpx;
          margin: 10rpx;
          font-size: 28rpx;
          font-weight: 500;
          line-height: 40rpx;
          border: 2rpx solid #3C9CFF;
          color: #3C9CFF;
          border-radius: 6rpx;
        }
      }
      .user-empty-block {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60rpx;
        font-size: 32rpx;
        line-height: 46rpx;
        color: #999999;
        background-color: #EFEFEF;
        border-bottom-left-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
      }
    }
    .page-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .button {
        width: 200rpx;
      }

      .header-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .header-item {
          padding: 5rpx 0 5rpx 20rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          font-size: 26rpx;
          line-height: 36rpx;
          color: #3C9CFF;
          background-color: #CCCCCC;
          border-radius: 6rpx;
          display: flex;
          align-items: center;
        }
        .header-item:last-child {
          margin-right: 0;
        }
      }
    }
    .empty-block {
      padding-top: 300rpx;
    }
  }
</style>
